<template>
  <a-modal
    :title="title"
    :width="600"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :destroyOnClose="true"
    :okButtonProps="{ props: { disabled: disableSubmit } }"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form :form="form" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-item label="旧密码">
        <a-input
          type="password"
          v-decorator="['oldPassword', validatorRules.oldPassword]"
          placeholder="请输入旧密码"
        ></a-input>
      </a-form-item>
      <a-form-item label="新密码">
        <a-input
          type="password"
          v-decorator="['password', validatorRules.password]"
          placeholder="请输入新密码"
        ></a-input>
      </a-form-item>
      <a-form-item label="确认新密码">
        <a-input
          type="password"
          v-decorator="['newPassword', validatorRules.newPassword]"
          placeholder="请输入确认新密码"
        ></a-input>
      </a-form-item>
    </a-form>
    <div slot="footer" class="dialog-footer">
      <a-button @click="handleCancel">取 消</a-button>
      <a-button type="primary" @click="handleOk">确 定</a-button>
    </div>
  </a-modal>
</template>

<script>
import Vue from 'vue'
import { changePassword } from '@/api/user'
import { randomString } from '@/utils/util'
import { USER_INFO } from '@/store/mutation-types'
import md5 from 'md5'

export default {
  name: 'DepartmentMoveModal',
  data () {
    return {
      title: '密码修改',
      labelCol: {
        sm: { span: 5 }
      },
      wrapperCol: {
        sm: { span: 19 }
      },
      visible: false,
      confirmLoading: false,
      disableSubmit: false,
      form: this.$form.createForm(this),
      validatorRules: {
        oldPassword: {
          rules: [{ required: true, message: '请输入旧密码' }]
        },
        password: {
          rules: [{ required: true, validator: this.validateToNextPassword }]
        },
        newPassword: {
          rules: [{ required: true, validator: this.compareToFirstPassword }]
        }
      },
      userinfo: Vue.ls.get(USER_INFO),
      confirmDirty: ''
    }
  },
  mounted () {},
  methods: {
    show () {
      this.visible = true
    },
    handleCancel () {
      this.visible = false
    },
    handleOk () {
      this.form.validateFields(async (err, fieldsValue) => {
        if (!err) {
          const data = {
            oldPassword: randomString(3) + md5(fieldsValue.oldPassword) + randomString(3),
            newPassword: randomString(3) + md5(fieldsValue.newPassword) + randomString(3)
          }
          let params = Object.assign({ userNo: this.userinfo.userNo }, data)
          let res = await changePassword(params)
          if (res.code === 0) {
            this.$message.success('密码修改成功，建议您重新登录')
            this.$emit('ok')
            this.handleCancel()
          } else {
            this.$message.warning(res.msg)
          }
        }
      })
    },
    validateToNextPassword (rule, value, callback) {
      const form = this.form
      if (!value) {
        return callback(new Error('密码不能为空'))
      } else {
        const reg = /^(?![^a-zA-Z]+$)(?!\D+$)(?![a-zA-Z0-9]+$).{8,16}$/
        if (value.indexOf(' ') >= 0) {
          callback(new Error('不能包含空格'))
        } else if (!reg.test(value)) {
          callback(new Error('密码由8-16位数字、字母和特殊符号组成!'))
        } else {
          if (value && form.getFieldValue('oldPassword') && value === form.getFieldValue('oldPassword')) {
            callback(new Error('新密码不能跟旧密码相同！'))
          } else if (value && form.getFieldValue('newPassword') && value !== form.getFieldValue('newPassword')) {
            callback(new Error('两次输入的密码不一样！'))
          }
          callback()
        }
      }
    },
    compareToFirstPassword (rule, value, callback) {
      const form = this.form
      if (!value && value !== form.getFieldValue('password')) {
        callback(new Error('两次输入的密码不一样！'))
      } else {
        callback()
      }
    },
    handleConfirmBlur (e) {
      const value = e.target.value
      this.confirmDirty = this.confirmDirty || !!value
    }
  }
}
</script>

<style lang="less" scoped>
.dialog-footer {
  text-align: right;
}
.el-dialog {
  .el-input,
  .el-select {
    width: 100%;
  }
}
/deep/ .el-dialog__body {
  padding-bottom: 0;
}
</style>
